<!--
 * @Descripttion: 
 * @version: 
 * @Author: weihua.yao
 * @Date: 2021-04-16 23:11:56
 * @LastEditTime: 2021-04-16 23:17:30
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
  <style>
    #chart {
      width: 800px;
      height: 400px;
    }
  </style>

</head>

<body>
  <div id="chart"></div>
  <script>
    const chartDom = document.getElementById('chart')
    const chart = echarts.init(chartDom)
    const option = {
      xAxis: {
        type: "category"
      },
      yAxis: {},
      dataset: {
        source: [
          ['一季度', 79, 100, '分类1', 50],
          ['二季度', 81, 112, '分类2', 60],
          ['三季度', 88, 96, '分类3', 55],
          ['四季度', 72, 123, '分类4', 70],
        ]
      },
      series: [{
          type: "pie",
          radius: "20%",
          center: ["55%", "20%"],
          cursor: "pointer",
          color: [
            "rgb(238, 102, 102)",
            "rgb(145, 204, 117)",
            "rgb(250, 200, 88)",
            "rgb(115, 192, 222)",
          ],
          emphasis: {
            focus: "seriess",
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)", // 折线颜色,
            },
          },
          encode: {
            itemName: "3",
            value: 4
          }
          // data: [{
          //     name: "分类1",
          //     value: 100,
          //   },
          //   {
          //     name: "分类2",
          //     value: 200,
          //   },
          //   {
          //     name: "分类3",
          //     value: 300,
          //   },
          //   {
          //     name: "分类4",
          //     value: 400,
          //   },
          // ],
        },
        {
          type: "line",
          // data: [100, 112, 96, 123],
          encode: {
            x: 0,
            y: 2
          },
          color: "#00FF00",
        },
        {
          type: "bar",
          encode: { x: 0, y: 1 },
          barWidth: 30,
          color: "rgb(145, 204, 117)",
          itemStyle: {
            borderColor: "#00C1DE",
            borderWidth: 1,
          },
        },
      ],
    };
    chart.setOption(option)
  </script>
</body>

</html>